<template>
    <div>
        <!-- 个人中心页面 -->
       <div v-for="item in  list" :key="item.cook_id">
        <div>
            <div class="img" :style="{backgroundImage:'url(' + imageUrl + ')'}"></div>
        </div>
       <div class="caidetail">
        <div>
            <p>{{ item.title }}</p>
            <span>浏览{{item.views_count_text}}\收藏{{item.favo_counts}}</span>
        </div>
        <div class="user-text">
           <div class="user-box">
                <img class="userimg" :src="item.user.user_photo" alt="">
                <span>{{ item.user.nickname }}</span>
           </div>
            <button>收藏</button>
        </div>
        <div>
            <p>{{ item.cookstory }}</p>
        </div>
        <div class="cai_ned" v-for="(i,index) in major" :key="index">
            <div>{{ i.title }}</div>
            <div>{{ i.note }}</div>
        </div>
        <div v-for="(t,index) in cookstep">
            <img class="img" :style="{backgroundImage:'url(' + t.image + ')'}" alt="">
            <p>{{ t.content }}</p>
        </div>
       </div>
       </div>
    </div>
</template>

<script>
import { Caidetails } from '../api/index';
export default {
    data(){
        return{
            imageUrl:'',
            cookstep:"",
            major:"",
            list:[]
        }
    },
    async created(){
       let {id} = this.$route.query
        await Caidetails(id)
        .then(
            Error=>{
                console.log(Error);
                let {state , result:{recipe}} = Error
                if(state=='success'){
                    let {photo_path,cookstep,major} = recipe
                    this.imageUrl = photo_path
                    this.major = major
                    this.imageUrl = photo_path
                    this.cookstep = cookstep
                    console.log(cookstep);
                
                    this.list = [recipe];
                    
                }
            }
        )
        
    }
}


</script>

<style lang="less" scoped>
.caidetail{
    padding: 0 10px;
    .cai_ned{
        display: flex;
        justify-content: space-between;
    }
}
.user-text{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0px;
    .user-box{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .userimg{
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
}
.img{
    width: 100%;
    height: 200px;
    background-size: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

</style>
